<template>
  <div style="padding: 2em" class="login-form">
    <div class="title"><span>立即登录</span></div>
    <n-input-group style="margin-top: 2em">
      <n-button>
        <template #icon>
          <n-icon>
            <person />
          </n-icon>
        </template>
      </n-button>
      <n-input placeholder="邮箱/用户名/手机" />
    </n-input-group>
    <n-input-group style="margin-top: 2em">
      <n-button>
        <template #icon>
          <n-icon>
            <lock-closed />
          </n-icon>
        </template>
      </n-button>
      <n-input placeholder="密码" />
    </n-input-group>
    <div style="text-align: right; margin-top: 2em">
      <a href="#" class="a" style="margin-right: 1em">立即注册</a>
      <a href="#" class="a">忘记密码</a>
    </div>
    <n-button type="error" style="margin-top: 2em; width: 100%">登录</n-button>
  </div>
</template>
<script lang="ts" >
import { NButton, NInputGroup, NInput, NIcon, NForm } from "naive-ui";
import { LockClosed, Person } from "@vicons/ionicons5";

export default {
  components: {
    NButton,
    NInputGroup,
    NInput,
    NIcon,
    NForm,
    LockClosed,
    Person,
  },
};
</script>
<style lang="scss" scoped>
.login-form {
  text-align: left;
  .title {
    font-family: "宋体";
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    span {
      display: inline-block;
      height: 100%;
      border-bottom: 3px solid rgb(229, 142, 142);
    }
  }
}
</style>